<template>
  <div class="datail-warp">
    <div class="detail-body-left">
      <div class="detail-body-header" v-if="item != null">
        <img class="detail-left-img" :src="item.coverImgUrl + '?param=280y280'" />
        <div class="detail-right-text">
          <span class="datail-title" :title="item.name">{{ item.name }}</span>
          <div class="datail-person">
            <img class="head-photo" :src="item.avatarUrl" />
            <span class="datai-name">{{ item.nickname }}</span>
            <span class="datai-time">{{ item.createTime }}</span>
          </div>
          <div class="datai-tags">
            <span v-for="(v, k) in item.tags" :key="k">
              <el-link>{{ "#" + v }}</el-link>
            </span>
          </div>
          <div class="datail-play">
            <span class="play-count">
              <i class="el-icon-headset" />
              播放{{ item.playCount }}次</span>
            <span class="like-count">
              <i class="el-icon-folder-add" />
              收藏{{ item.subscribedCount }}次</span>
            <span class="message-count">
              <i class="el-icon-chat-dot-square" />
              评论{{ item.commentCount }}条</span>
          </div>
          <div class="introduce">
            <span>歌单简介</span>
            <p :title="item.description">{{ item.description }}</p>
          </div>
        </div>
      </div>
      <div class="detai-list">
        <div class="detait-list-title">
          <h3>歌曲列表</h3>
          <p>共{{ playCount }}首歌曲</p>
        </div>
        <el-table :data="pageList" :row-key="pageList.index" :stripe="true" v-loading="loading"
          element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中">
          <el-table-column prop="name" label="歌曲" show-overflow-tooltip>
            <template slot-scope="scope">
              <i class="el-icon-video-play"></i>
              <el-link :underline="false" @click="handelplay(scope.row.songId)"><span class="songPlay">{{
                  scope.row.name
              }}</span></el-link>
            </template>
          </el-table-column>
          <el-table-column prop="singer" label="歌手" show-overflow-tooltip>
            <template slot-scope="scope">
              <i class="el-icon-user"></i>
              <span class="songPlay">{{ scope.row.singer }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="album" label="专辑" show-overflow-tooltip>
            <template slot-scope="scope">
              <i class="iconfont">&#xe64b;</i>
              <span class="songPlay">{{ scope.row.album }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :page-size="20" @size-change="handelPage"
          @current-change="handelPage" :total="songList.length">
        </el-pagination>
      </div>
    </div>
    <div class="detailBodyRight"></div>
  </div>
</template>

<script>
import { songListDetail, songListAll } from "@/api/api";
import { formatDate, formatNum } from "@/utils/public";
export default {
  name: "songDetail",
  data() {
    return {
      detailId: { id: null },
      item: {},
      playCount: null,
      songList: [],
      pageList: [],
      loading: false,
    };
  },
  mounted() {
    this.detailId.id = this.$route.query.detailId;
    this.getDetail(this.detailId);
    this.getListAll(this.detailId);
  },
  methods: {
    // 获取歌单详情
    getDetail() {
      songListDetail(this.detailId).then((res) => {
        let obj = {
          coverImgUrl: null,
          avatarUrl: null,
          nickname: null,
          createTime: null,
          description: null,
          name: null,
          playCount: null,
          commentCount: null,
          subscribedCount: null,
          tags: [],
        };
        obj.coverImgUrl = res.data.playlist.coverImgUrl;
        obj.avatarUrl = res.data.playlist.creator.avatarUrl;
        obj.nickname = res.data.playlist.creator.nickname;
        obj.createTime = formatDate(res.data.playlist.createTime);
        obj.description = res.data.playlist.description;
        obj.name = res.data.playlist.name;
        obj.playCount = formatNum(res.data.playlist.playCount);
        obj.subscribedCount = formatNum(res.data.playlist.subscribedCount);
        obj.tags = res.data.playlist.tags;
        obj.commentCount = res.data.playlist.commentCount;
        this.item = obj;
      });
    },
    // 获取歌单歌曲列表
    getListAll() {
      this.loading = true
      songListAll(this.detailId).then((res) => {
        this.playCount = res.data.songs.length;
        let list = res.data.songs;
        if(!list) return
        list.forEach((e) => {
          let _songDetail = {
            name: null,
            singer: null,
            album: null,
            songId: null,
          };
          _songDetail.songId = e.id
          _songDetail.name = e.name;
          _songDetail.singer = e.ar[0].name;
          _songDetail.album = e.al.name;
          this.songList.push(_songDetail);
          this.loading = false;
        });
        this.pageList = this.songList.slice(0, 20);
      });
    },
    handelplay(v) {
      this.getMusic(v)
      // console.log(v);
    },
    handelPage(v) {
      this.pageList = this.songList.slice(v * 20 - 20, v * 20);
    },
  },
};
</script>

<style lang="less" scoped>
.datail-warp {
  width: 1200px;
  margin: 120px auto 0 auto;
  display: flex;
  justify-content: space-between;

  .detail-body-left {
    width: 880px;

    .detail-body-header {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .detail-left-img {
        width: 280px;
        height: 280px;
        padding: 5px;
        border-radius: 10px;
        box-sizing: border-box;
        border: 1px solid #6b6b6b36;
      }

      .detail-right-text {
        width: 580px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .datail-title {
          margin-top: 5px;
          font-size: 20px;
          font-family: "hmB";
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          line-height: 22px;
          overflow: hidden;
          -webkit-box-orient: vertical;
        }

        .datail-person {
          width: 580px;
          height: 50px;
          margin-top: 5px;
          display: flex;

          .head-photo {
            width: 50px;
            height: 50px;
            border-radius: 100%;
          }

          .datai-name {
            height: 50px;
            line-height: 50px;
            margin-left: 20px;
            font-family: "hmR";
            color: #6b6b6b;
          }

          .datai-time {
            height: 50px;
            line-height: 50px;
            margin-left: 20px;
            font-size: 14px;
            font-family: "hmR";
            color: #6b6b6b;
          }
        }

        .datai-tags {
          font-family: "hmR";
          margin-top: 5px;
          display: flex;

          span {
            display: block;
            width: auto;
            height: 18px;
            margin-right: 20px;

            a {
              color: rgb(61, 116, 240);
            }
          }
        }

        .datail-play {
          margin-top: 5px;
          display: flex;
          width: 580px;
          font-size: 14px;
          font-family: "hmR";
          color: #969696;

          .like-count {
            margin-left: 20px;
          }

          .message-count {
            margin-left: 20px;
          }
        }

        .introduce {
          margin-top: 5px;
          width: 580px;
          height: 120px;

          span {
            display: block;
            width: 570px;
            height: 20px;
            font-size: 18px;
            font-family: "hmR";
            color: #202020;
          }

          p {
            width: 100%;
            height: 100px;
            padding: 5px 5px 0 0;
            box-sizing: border-box;
            font-family: "hmR";
            color: #6b6b6b;
            font-size: 14px;
            overflow: hidden;
            line-height: 19px;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
          }
        }
      }
    }

    .detai-list {
      width: 100%;
      margin-top: 10px;

      .detait-list-title {
        h3 {
          font-family: "hmB";
          font-size: 28px;
          color: #202020;
          display: inline-block;
        }

        p {
          margin-left: 20px;
          font-family: "hmR";
          color: #6b6b6b;
          display: inline-block;
        }
      }

      .el-table {
        margin-top: 20px;
        font-family: "hmR";

        .template .songPlay {
          color: #6b6b6b;
        }

        i {
          font-size: 14px;
          margin-right: 5px;
        }

        .iconfont {
          font-size: 14px !important;
        }
      }

      .el-pagination {
        margin-top: 10px;
      }
    }
  }

  .detailBodyRight {
    width: 300px;
    height: 500px;
    border: 1px solid red;
  }
}
</style>